<template>
	<!-- 行政监管 数据调阅-->
	<div class="content">
		<search-date
			@getChangeTime="getChangeTime"
			:initTimeDatas="initTimeDatas"
		></search-date>
		<div class="btns">
			<el-button type="button" @click="changeShowChart($event)">
				<span class="iconfont">&#xe669;</span>
			</el-button>
			<el-button type="button" @click="changeShowList($event)">
				<span class="iconfont">&#xe66a;</span>
			</el-button>
		</div>

		<div id="chart" v-show="showChart">
			<section>
				<el-row>
					<el-col :span="24" class="item">
						<span class="title">医生调阅量</span>
						<span class="title">PAD调阅：2179</span>
						<span class="title">PHONE调阅: 2033</span>
						<span class="title">PC调阅：2974</span>
						<span class="title">总体调阅：7186</span>
					</el-col>
				</el-row>

				<el-row>
					<!-- <search-date @getTime="getTimeDate"></search-date> -->
				</el-row>

				<el-row id="c1" :style="{ height: scrollerHeight }">
					<stack-barPlot :chartObj="chartObj1"></stack-barPlot>
				</el-row>
			</section>
			<section>
				<el-row>
					<el-col :span="24" class="item">
						<span class="title">患者调阅量</span>
						<span class="title">PAD调阅：2179</span>
						<span class="title">PHONE调阅: 2033</span>
						<span class="title">PC调阅：2974</span>
						<span class="title">总体调阅：7186</span>
					</el-col>
				</el-row>
				<el-row id="c2" :style="{ height: scrollerHeight }">
					<stack-barPlot :chartObj="chartObj2"></stack-barPlot>
				</el-row>
				<el-row></el-row>
			</section>
		</div>
		<div id="tableList" v-if="showList">
			<section>
				<el-row>
					<h2>医生调阅</h2>
				</el-row>
				<my-table
					:table-data="tableDataDoctor"
					:col-configs="colConfigs"
					:list-loading="listLoading"
					:total="total"
					:page-size="listQuery.pagesize"
					@refreshList="getReadList"
				/>
			</section>
			<section>
				<el-row>
					<h2>患者调阅</h2>
				</el-row>
				<my-table
					:table-data="tableDataPatient"
					:col-configs="colConfigs2"
					:list-loading="listLoading"
					:total="total"
					:page-size="listQuery.pagesize"
					@refreshList="getReadList"
				/>
			</section>
		</div>
	</div>
</template>

<script>
import myTable from '@/components/myTable'
import searchDate from '@/components/common/searchDate'
import stackBarPlot from '@/components/chart/stackBarPlot '
import { get_region_readership } from '@/api/admin'
import { getReadData } from '@/api/data-watch'
import { groupBy, clone, compareArray, objSum } from '@/utils/base.js'
import { mapGetters } from 'vuex'
const barData1 = [
	{
		地区: '超声科',
		分类: 'PHONE',
		调阅量: 1454715.807999998,
	},
	{
		地区: '超声科',
		分类: 'PAD',
		调阅量: 2287358.261999998,
	},
	{
		地区: '放射科',
		分类: 'PHONE',
		调阅量: 1335665.3239999984,
	},
	{
		地区: '放射科',
		分类: 'PC',
		调阅量: 1335665.3239999984,
	},
	{
		地区: '放射科',
		分类: 'PAD',
		调阅量: 2057936.7620000008,
	},
	{
		地区: '放射科',
		分类: 'PC',
		调阅量: 2057936.7620000008,
	},
	{
		地区: '心电科',
		分类: 'PHONE',
		调阅量: 834842.827,
	},
	{
		地区: '心电科',
		分类: 'PAD',
		调阅量: 1323985.6069999991,
	},
	{
		地区: '内镜',
		分类: 'PHONE',
		调阅量: 804769.4689999995,
	},
	{
		地区: '内镜',
		分类: 'PC',
		调阅量: 804769.4689999995,
	},
	{
		地区: '内镜',
		分类: 'PAD',
		调阅量: 1220430.5610000012,
	},
	{
		地区: '核医学',
		分类: 'PHONE',
		调阅量: 469341.684,
	},
	{
		地区: '核医学',
		分类: 'PAD',
		调阅量: 677302.8919999995,
	},
	{
		地区: '其他',
		分类: 'PHONE',
		调阅量: 253458.1840000001,
	},
	{
		地区: '其他',
		分类: 'PAD',
		调阅量: 458058.1039999998,
	},
]
export default {
	name: ' ',
	components: {
		myTable,
		stackBarPlot,
		searchDate,
	},
	data () {
		return {
			initTimeDatas: [
				{
					text: '昨天',
					code: 'lastDay',
				},
				{
					text: '最近一周',
					code: 'lastOneWeek',
				},
				{
					text: '最近一月',
					code: 'lastOneMonth',
				},
				{
					text: '总计',
					code: 'allTime',
				},
			],
			colConfigs: [
				{
					prop: 'exam_org_name',
					label: '机构名称',
					sortable: false,
				},
				{
					prop: 'val_doc',
					label: '医生站',
					sortable: false,
				},
				{
					prop: 'val_app',
					label: 'APP',
					sortable: false,
				},
				{
					prop: 'val_vx',
					label: '微信',
					sortable: false,
				},
				{
					prop: 'val_web',
					label: '网站',
					sortable: false,
				},
				{
					prop: 'val_h5',
					label: 'H5',
					sortable: false,
				},
				{
					prop: 'sum',
					label: '总计',
					sortable: false,
				},
			],
			colConfigs: [
				{
					prop: 'exam_org_name',
					label: '机构名称',
					sortable: false,
				},
				/* 	{
						prop: 'val_doc',
						label: '医生站',
						sortable: false,
					}, */
				{
					prop: 'val_app',
					label: 'APP',
					sortable: false,
				},
				{
					prop: 'val_vx',
					label: '微信',
					sortable: false,
				},
				{
					prop: 'val_web',
					label: '网站',
					sortable: false,
				},
				{
					prop: 'val_h5',
					label: 'H5',
					sortable: false,
				},
				{
					prop: 'sum',
					label: '总计',
					sortable: false,
				},
			],
			tableDataDoctor: [],
			tableDataPatient: [],
			total: null,
			listLoading: false,
			clearTime: false,
			showChart: true,
			showList: false,
			chartId: 'c1',
			chartId2: 'c2',
			initTime: [],
			listQuery: {
				startTime: null,
				endTime: null,
			},
			chartObj: {
				chartId: null,
				data: [], // 数组对象
				titleText: null,
				desText: null, // 描述文本
				field: {
					xField: null,
					yField: null,
				},
			},
			chartObj1: {
				chartId: 'c1',
				data: [],
			},
			chartObj2: {
				chartId: 'c2',
				data: [],
			},
			client_kind_list: [
				{ client_kind: 1, label: '医生站', props: 'val_doc' },
				{ client_kind: 2, label: 'APP', props: 'val_app' },
				{ client_kind: 3, label: '微信', props: 'val_vx' },
				{ client_kind: 4, label: '网站', props: 'val_web' },
				{ client_kind: 5, label: 'H5页面', props: 'val_h5' },
			]
		}
	},
	computed: {
		scrollerHeight () {
			return `${ ( window.innerHeight - 235 ) / 2 }px`
		},
		...mapGetters( [ 'roleValue' ] )
	},
	created () {
		/* this.getReadList()
		this.getDoctorChart()
		this.getPatient()
		console.log( this.roleValue ); */
	},
	mounted () {
		this.chartObj2.data = barData1
	},
	methods: {
		getChangeTime ( val ) {
			// 获取时间
			console.log( val )
			this.listQuery = Object.assign( this.listQuery, val )
			this.getReadList()
		},
		changeShowChart ( $event ) {
			// 切换显示
			this.showChart = true
			this.showList = false
		},
		changeShowList ( $event ) {
			// 切换显示
			this.showList = true
			this.showChart = false
		},

		getReadList () {
			// alert( 'hahah' )
			// 判断 机构管理或者是行政监管
			get_region_readership( { user_kind: 1 } ).then( res => {
				if ( res.code === 0 ) {
					// todo 表格数据清洗
					let data = clone( res.data )
					data.forEach( ( item ) => {
						let list = item.detail_list
						console.log( list )
						if ( list.length > 0 ) {
							list.forEach( ( ite ) => {
								this.client_kind_list.forEach( element => {
									if ( ite.client_kind === element.client_kind ) {
										item[ element.props ] = ite.count
									} else {
										item[ element.props ] = 0
									}
								} )
							} )
						}
						item.sum = item.val_doc + item.val_app + item.val_vx + item.val_web + item.val_h5
						delete item.detail_list
					} )
					console.log( data )
					this.tableDataDoctor = data
					// 绘图
					this.getDoctorChart( data )

				}
			} )
		},
		getMechList () {
			// 机构管理 userkind : 1 医生 2 患者
			// alert( 'hahah' )
			// 判断 机构管理或者是行政监管
			get_region_readership( { user_kind: 1 } ).then( res => {
				if ( res.code === 0 ) {
					// todo 表格数据清洗
					let data = clone( res.data )
					data.forEach( ( item ) => {
						let list = item.detail_list
						console.log( list )
						if ( list.length > 0 ) {
							list.forEach( ( ite ) => {
								this.client_kind_list.forEach( element => {
									if ( ite.client_kind === element.client_kind ) {
										item[ element.props ] = ite.count
									} else {
										item[ element.props ] = 0
									}
								} )
							} )
						}
						item.sum = item.val_doc + item.val_app + item.val_vx + item.val_web + item.val_h5
						delete item.detail_list
					} )
					console.log( data )
					this.tableDataDoctor = data
					// 绘图
					this.getDoctorChart( data )

				}
			} )
		},
		getDoctorChart ( data ) {
			// 存储数量统计
			this.chartObj1 = {
				chartId: 'c1',
				data: this.barData, // 数组对象
				titleText: '存储内容数量统计',
				desText: '单位: 万/次', // 描述文本
				field: {
					xField: '科室',
					yField: '调阅量',
					stackField: '分类',
				},
			}
		},
		getPatient () {
			// 存储容量统计
			this.chartObj2 = {
				chartId: 'c2',
				data: this.barData, // 数组对象
				titleText: '存储内容容量统计',
				desText: '单位: 万', // 描述文本
				field: {
					xField: '使用量',
					yField: '类别',
				},
			}
		},
	},
	watch: {},
	filter: {},
}
</script>

<style scoped lang="less">
.content {
	padding-left: 20px;
	#tableList > :first-child h2 {
		margin-top: 0;
	}
	.btns {
		position: absolute;
		right: 0;
		top: 145px;
		z-index: 888888;
	}
	i {
		color: #fff;
		opacity: 1;
	}
	h2 {
		height: 25px;
		font-size: 18px;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: rgba(51, 51, 51, 1);
		line-height: 25px;
		margin: 30px 0;
	}
	.item {
		margin: 10px;
		span {
			display: inline-block;
			margin-right: 2.5%;
			font-size: 14px;
		}
		> :nth-child(1) {
			font-size: 18px;
			color: @333;
			font-weight: 500;
		}
		> :nth-child(2) {
			color: @1C8BE4;
		}
		> :nth-child(3) {
			color: @EF8900;
		}
		> :nth-child(4) {
			color: @5660A9;
		}
		> :nth-child(5) {
			color: @333;
		}
	}
	.el-button {
		border: 0px;
	}
}
</style>
